<template>
  <div class="box-counter">
    <button type="button" class="btn btn-light btn-sm" @click="add(-1)" :disabled="isDisabled">-</button>
    <span class="count">{{ props.count }}</span>
    <button type="button" class="btn btn-light btn-sm" @click="add(1)">+</button>
  </div>
</template>

<script setup>
// 依赖
import { defineProps, defineEmits, computed } from 'vue'

// 自定义属性
const props = defineProps({
  count: {
    type: Number,
    required: true
  }
})

// 自定义事件
const emit = defineEmits(['count-change'])

// 计算属性
const isDisabled = computed(() => props.count <= 1)

// methods 方法，修改数量
const add = n => {
  if (props.count + n >= 1) {
    emit('count-change', props.count + n)
  }
}
</script>

<style lang="less" scoped>
.box-counter {
  .btn {
    width: 30px;
  }
  .count {
    line-height: 30px;
    padding: 0 15px;
  }
}
</style>
